import 'package:flutter/material.dart';

// 定义有状态组件
// 快捷键：fstfull，得安装插件：Flutter Widget Snippets
class HomePage11_1 extends StatefulWidget {
  const HomePage11_1({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage11_1> {
  // 状态变量
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView组件', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.blue,
      ),
      // 1. GridView 默认构造函数
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 侧轴方向子元素的个数
          crossAxisCount: 3,
          // 宽高比，横向占4份，纵向占2份
          childAspectRatio: 4 / 2,
          // 侧轴方向的间距
          crossAxisSpacing: 10,
          // 主轴方向的间距
          mainAxisSpacing: 20,
        ),
        children: [
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('Flutter程序员1'),
          ),
          Container(
            color: Colors.pink,
            alignment: Alignment.center,
            child: const Text('Flutter程序员2'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('Flutter程序员3'),
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('Flutter程序员4'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('Flutter程序员5'),
          ),
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('Flutter程序员6'),
          ),
        ],
      ),
    );
  }
}
